import {computed, designPage, useClasses} from '@peryl/react-compose';
import React from "react";
import {Application, i18n, PageThemeUtils, ThemeEditor} from "plain-design";
import {deepcopy} from '@peryl/utils/deepcopy';
import {AppRouter} from "../../AppRouter";
import '../../module/plain-design/index';
import {EnUsLocale} from "../../../../node_modules/plain-design/src/packages/i18n/lang/en-us";

i18n.state.localeOptions.push({ label: 'English', key: 'en-us', lang: EnUsLocale, });
i18n.setLangs({ 'en-us': EnUsLocale });
i18n.applyCache();

export const App = designPage(() => {

  const configuration = computed(() => {
    const val = deepcopy(PageThemeUtils.configuration.value);
    if (!val.theme) {

      val.theme = {};
    }
    if (!val.theme.vars) {
      val.theme.vars = {};
    }
    if (!val.theme.base) {
      val.theme.base = {};
    }

    /*Object.entries(ThemePrimaryColors).forEach(([key, value]) => {
      if (!value) {
        return;
      }
      (val.theme!.base as any)[key] = value.primary;
    });*/

    /*if (PageThemeUtils.state.primaryKey === 'dark') {
      delete val.theme.base.primary;
    }*/

    Object.assign(val.theme.vars, {
      'ql-padding-top': '4px',
      'ql-padding-bottom': '4px',

      'header-1-font-size': '24px',
      'header-2-font-size': '20px',
      'header-3-font-size': '16px',
      'header-4-font-size': '14px',

      'header-1-line-height': '45px',
      'header-2-line-height': '36px',
      'header-3-line-height': '30px',
      'header-4-line-height': '27px',

      'font-size-mini': '12px',
      'font-size-small': '12px',
      'font-size-normal': '14px',
      'font-size-large': '16px',

      'line-height-mini': '24px',
      'line-height-small': '28px',
      'line-height-normal': '30px',
      'line-height-large': '32px',

      'border-radius-mini': '2px',
      'border-radius-small': '4px',
      'border-radius-normal': '6px',
      'border-radius-large': '6px',

      ...val.default?.size === 'small' || val.default?.size === 'mini' ? {
        'ql-padding-top': '2px',
        'ql-padding-bottom': '2px',

        'header-1-font-size': '20px',
        'header-2-font-size': '16px',
        'header-3-font-size': '14px',
        'header-4-font-size': '12px',

        'header-1-line-height': '36px',
        'header-2-line-height': '30px',
        'header-3-line-height': '27px',
        'header-4-line-height': '24px',

        'font-size-mini': '12px',
        'font-size-small': '12px',
        'font-size-normal': '12px',
        'font-size-large': '14px',

        'line-height-mini': '24px',
        'line-height-small': '24px',
        'line-height-normal': '24px',
        'line-height-large': '30px',

        'border-radius-mini': '2px',
        'border-radius-small': '2px',
        'border-radius-normal': '2px',
        'border-radius-large': '4px',
      } : {}
    });

    if (val.default?.shape === 'none') {
      Object.assign(val.theme.vars, {
        'border-radius-mini': '0',
        'border-radius-small': '0',
        'border-radius-normal': '0',
        'border-radius-large': '0',
      });
    }

    return val;
  });

  const themeEditorClasses = useClasses(() => [
    `theme-with-${PageThemeUtils.state.primaryKey || 'default'}`
  ]);

  return () => (
    <Application configuration={configuration.value}>
      <div className="plain-editor-app">
        <ThemeEditor className={themeEditorClasses.value} bottom={12}/>
        <div className="plain-editor-app-content">
          {AppRouter.render()}
        </div>
      </div>
    </Application>
  );
});
